<template>
  <div class="container">
    <div style="position: absolute;left: 20%;">
      <h3>成绩录入/处理</h3>

      <table border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            学号:
            <input />
          </td>
          <td>
            姓名：
            <input />
          </td>
          <td>
            c语言
            <input />
          </td>
          <td>
            java
            <input />
          </td>
          <td>
            <a style="color:blue;text-decoration: underline;">录入</a>
            <a style="color:blue;text-decoration: underline;">重置</a>
          </td>
        </tr>
        <tr>
          <td>
            搜索:
            <input />
          </td>
          <td>
            排序字段:
            <input />
          </td>
          <td>
            排序顺序:
            <input />
          </td>
          <td colspan="2"></td>
        </tr>
      </table>
      <h3>成绩列表</h3>
      <div>
        <el-table :data="tableData" border style="width:700px">
          <el-table-column prop="date" label="学号" width="150"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="province" label="c语言" width="120"></el-table-column>
          <el-table-column prop="city" label="java" width="120"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "grade",
    data() {
      return {
        tableData: [
          {
            date: "2020-06-27",
            name: "王小虎",
            province: "80",
            city: "70"
          },
          {
            date: "2020-06-27",
            name: "谢小牛",
            province: "69",
            city: "80"
          },
          {
            date: "2020-6-27",
            name: "张小鸡",
            province: "上海",
            city: "普陀区"
          },
          {
            date: "2020-6-27",
            name: "李小鸭",
            province: "90",
            city: "100"
          }
        ]
      };
    },
    methods: {
      handleClick(row) {
        console.log(row);
      }
    }
  };
</script>

<style scoped>
  input {
    width: 110px;
  }
  .container {
    display: flex;
    flex-flow: column;
    align-items: baseline;
    position: relative;
  }
  .container >>> .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
</style>
